<template>
    <div class="app-container">
        <!-- <PageHeader :border="false" title="房间管理" />
        <el-divider class="mt-0" /> -->

        <el-row class="mb-3" :gutter="20">
            <el-col :span="4">
                <div class="head-container">
                    <el-input v-model="deptName" placeholder="请输入部门名称" clearable prefix-icon="Search"
                        style="margin-bottom: 20px" />
                </div>
                <div class="head-container" style="height: calc(100vh - (85px + 40px + 30px));overflow-y: auto">
                    <el-tree :data="deptOptions" :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
                        :expand-on-click-node="false" :filter-node-method="filterNode" ref="deptTreeRef"
                        node-key="deptId" :default-expanded-keys="defaultexpandedkeys" highlight-current :accordion=true
                        @node-click="handleNodeClick" />
                    <!--default-expand-all   默认展开全部 -->
                </div>
            </el-col>
            <el-col :span="20">
                <!--查询条件-->
                <el-form ref="queryParamsRef" :inline="true" :model="queryParams" label-width="auto">
                    <el-form-item label="房间名称" prop="roomname">
                        <el-input v-model="queryParams.roomname" clearable @clear="getRoomLists"
                            @keyup.enter.native="getRoomLists" />
                    </el-form-item>
                    <el-form-item label="房间类型">
                        <el-select v-model="queryParams.roomtypeId" clearable style="width: 12.5rem"
                            @change="getRoomLists">
                            <el-option v-for="item in RoomTypeList" :key="item.roomtypeId" :label="item.name"
                                :value="item.roomtypeId" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="getRoomLists">
                            <el-icon class="me-1">
                                <Search />
                            </el-icon>
                            查询
                        </el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="handleRest(queryParamsRef)">
                            <el-icon class="me-1">
                                <Refresh />
                            </el-icon>
                            重置
                        </el-button>
                    </el-form-item>
                </el-form>

                <el-space class="mb-3">
                    <el-button type="primary" plain icon="Plus" @click="AddEditRoomRef.showAddDrawer(deptId)">
                        新增
                    </el-button>
                </el-space>

                <el-table ref="roomTableRef" v-loading="loading" :data="roomTables"
                    @selectionChange="selectChangeHandle"
                    @row-dblclick="handleRowDblClick"
                    stripe
                    :row-style="tableRowStyle"
                    border>
                    <el-table-column label="房间名称" prop="roomname" />
                    <!-- <el-table-column label="房间编号" prop="roomcode" /> -->
                    <el-table-column label="房间类别" prop="roomtypeId" width="180">
                    </el-table-column>
                    <el-table-column label="所属单位" prop="unitId" />
                    <el-table-column label="所属警务区" prop="policeareaId" width="180" />
                    <el-table-column label="状态" prop="state" width="100" filter-placement="bottom-end" align="center">
                        <template #default="{ row, $index }">
                            <el-tag :type="row.state === '正常' ? 'success' : 'danger'" disable-transitions>{{ row.state
                            }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="140" align="center">
                        <template #default="scope">
                            <el-button link size="small" type="primary"
                                @click="AddEditRoomRef.showEditDrawer(scope.row)">
                                <el-icon class="me-1">
                                    <Edit />
                                </el-icon>
                                编辑
                            </el-button>
                            <el-button link size="small" type="danger" @click="deleteRooms(scope.row)">
                                <el-icon class="me-1">
                                    <Delete />
                                </el-icon>
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination v-show="total > 0" v-model:limit="paging.pageSize" v-model:page="paging.pageNum"
                    :total="total" @pagination="getRoomLists" />
            </el-col>
        </el-row>

        <AddEditRoom ref="AddEditRoomRef" @getRoomList="getRoomLists" />
    </div>
</template>

<script setup>
import { ElMessageBox } from 'element-plus'
import PageHeader from "@/components/PageHeader/index.vue";
import AddEditRoom from "./AddEditRoom/AddEditRoom.vue";
import { listDept, } from "@/api/system/dept";
import { getRoomList, deleteRoom, getRoomTypeList } from "@/api/Room/room";
import { getCurrentInstance } from "vue";

import { deptTreeSelect, getUserProfile } from "@/api/system/user";
import PageEnum from "@/enum/PageEnum.js";

const { proxy } = getCurrentInstance();
const { sys_normal_disable, nj_room_type } = proxy.useDict('sys_normal_disable', 'nj_room_type')


const queryParamsRef = ref()
const deleteStatus = ref(true)
const AddEditRoomRef = ref({})

const defaultexpandedkeys = ref([])

const unitId = ref()
const deptList = ref([])
const refreshTable = ref(true);
const treeloading = ref(true);

const isExpandAll = ref(true);

const loading = ref(false)
const paging = ref({
    // 页码
    pageNum: 1,
    // 分页数量
    pageSize: PageEnum.SIZE
})

// 房间列表
const RoomTypeList = ref([]);
// 房间类型
const RoomTypeListqueryParams = ref({
    roomtypeId: '',
    name: '',
    type: 1,
    // orderByColumn:'creatdate',
    // isAsc: 'desc'
})
// 房间类型属性
const Areapaging = ref({
    pageNum: 1,// 页码
    pageSize: 9999// 分页数量
})
const queryParams = ref({
    roomname: null,
    roomtypeId: null,
    unitId: null
})


const total = ref(0)
const roomTables = ref([
    {
        roomname: '测试房间名称1',
        roomcode: '123',
        roomtypeId: '2',
        policeareaId: '所属警务区1',
        unitId: 100,
        parentId: 103,
        state: 1
    }
])

onMounted(() => {
    // getDeptLists()
    getRoomLists();
    getDeptTree();
    getRoomTypeLists()
})
// 斑马纹样式函数
const tableRowStyle = ({ row, rowIndex }) => {
    if (rowIndex % 2 === 0) {
        return { backgroundColor: '#e6ecff' }; // 偶数行背景色
    }
    return {}; // 奇数行默认透明
}
// 获取房间类型列表
const getRoomTypeLists = async () => {
    await getRoomTypeList(RoomTypeListqueryParams.value, Areapaging.value).then(res => {
        RoomTypeList.value = res.rows
        console.log(res.rows)
    })
}
// 获取调解室房间列表
const getRoomLists = async () => {
    if (!queryParams.value.unitId) {
        getUserProfile().then(res => {
            queryParams.value.unitId = res.data.unitId;
            // 确保 unitId 赋值后再执行下面的逻辑
            loading.value = true;
            getRoomList(queryParams.value, paging.value).then(res => {
                roomTables.value = res.rows
                total.value = res.total
                loading.value = false
            })
        });
    } else {
        loading.value = true
        await getRoomList(queryParams.value, paging.value).then(res => {
            roomTables.value = res.rows
            total.value = res.total
            loading.value = false
        })
    }

}

const roomTableRef = ref()
const selectChangeHandle = (data) => {
    deleteStatus.value = data.length === 0;
}
const handleRowDblClick = (row) => {
    AddEditRoomRef.value.showEditDrawer(row)
}

const deleteRooms = async (row) => {
    ElMessageBox.confirm('确定删除此房间？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        deleteRoom(row.roomId).then(res => {
            getRoomLists()
        })
    }).catch(() => {
    });
}

// 重置搜索调解
const handleRest = (formEl) => {
    queryParams.value = {
        roomname: '',
        roomcode: '',
        roomtypeId: null,
    }
    getRoomLists()
}

const deptId = ref("");
const deptName = ref("");
const deptOptions = ref(undefined);
/** 通过条件过滤节点  */
const filterNode = (value, data) => {
    if (!value) return true;
    return data.deptName.indexOf(value) !== -1;
};
/** 根据名称筛选部门树 */
watch(deptName, val => {
    proxy.$refs["deptTreeRef"].filter(val);
});
/** 查询部门下拉树结构 */
function getDeptTree() {
    listDept().then(response => {
        deptOptions.value = response.data.filter(
            item => item.isUnit === true
        );
        deptOptions.value = proxy.handleTree(deptOptions.value, "deptId");
        defaultexpandedkeys.value = []
        defaultexpandedkeys.value = deptOptions.value.map(item => item.deptId);
    });
    // deptTreeSelect().then(response => {
    //     deptOptions.value = response.data;
    // });
};
/** 节点单击事件 */
function handleNodeClick(data) {
    queryParams.value.unitId = data.deptId;
    deptId.value = data.deptId;
    // 朱
    // queryParams.value.unitId = data.id;
    // deptId.value = data.id;   
    getRoomLists();
};

</script>

<style lang="scss" scoped>
/* 保留斑马纹的同时添加悬停效果 */
:deep().el-table--striped .el-table__body tr.el-table__row--striped:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}

:deep().el-table__body tr:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}
</style>